<script lang="ts" setup>
import { Plus } from '@element-plus/icons-vue'
import { defineProps, defineEmits, ref, watch, reactive, watchEffect } from 'vue'
import { uploadFile } from '@/api/base' // 图片上传
import { editUser } from '@/api/user' // 图片上传
const baseUrl = import.meta.env.VITE_BASE_API // import.meta.env.VITE_BASE_API   引入全局变量
const emit = defineEmits<{
  (e: 'closeDrawer'): void
}>()

interface Props {
  visibleDrawer?: boolean
  editUser?: any
}
const props = withDefaults(defineProps<Props>(), {
  visibleDrawer: false,
  editUser: {}
})
//角色列表
const roleList = reactive([
  {
    id: 1,
    name: '管理员',
    description: '管理员',
    createTime: '2020-05-05',
    updateTime: '2020-05-05'
  },
  {
    id: 0,
    name: '普通用户',
    description: '普通用户',
    createTime: '2020-05-05',
    updateTime: '2020-05-05'
  }
])

// 图片上传
const uploadFun = async (file: File) => {
  const res = await uploadFile({ file })
  console.log(res)
  if (res.errcode === 0) {
    ElMessage.success('上传成功')
    let values = form.value

    values.user_avatar = res.data.url
    console.log(values)
    form.value = values
  } else {
    ElMessage.error(res.msg || '上传失败')
  }
}

// 组件上传触发
const beforeUpload = (e: any) => {
  uploadFun(e)
}

const form = ref(props.editUser)
// 监听弹窗变化，重新给值
watch(
  () => props.visibleDrawer,
  (val) => {
    if (val) {
      form.value = props.editUser
    }
  }
)

// 提交修改
const submitEditUser = () => {
  console.log(form.value, 'form')
  editUserFun(form.value)
  emit('closeDrawer')
}
// 取消&关闭
const changeParentProps = () => {
  emit('closeDrawer')
}

// 修改信息
const editUserFun = async (params: any) => {
  const res = await editUser(params)
  if (res.errcode === 0) {
    ElMessage.success('修改成功')
    emit('closeDrawer', true)
  } else {
    ElMessage.error(res.msg || '修改失败')
  }
}
</script>
<!-- 编辑角色 -->
<template>
  <el-drawer title="角色编辑" v-model="props.visibleDrawer" size="50%" direction="rtl" @close="changeParentProps">
    <template #default>
      <!-- 编辑角色 -->
      <el-form :model="form" label-width="80px" colon>
        <el-form-item label="手机号">
          <el-input v-model="form.user_phone" disabled />
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="form.user_name" />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="form.user_nickname" />
        </el-form-item>
        <el-form-item label="头像">
          <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeUpload">
            <img v-if="form.user_avatar" :src="baseUrl + form.user_avatar" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.user_email" />
        </el-form-item>
        <el-form-item label="角色">
          <el-select class="editSelect" v-model="form.user_role">
            <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="签名">
          <el-input v-model="form.user_description" type="textarea" />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div style="text-align: left">
        <el-button type="primary" @click="submitEditUser">确定</el-button>
        <el-button @click="changeParentProps">取消</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style lang="scss" scoped>
.editUserBox {
  background-color: aqua;
}
.editSelect {
  width: 100%;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader :deep(.el-upload) {
  border: 1px dashed rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 160px;
  height: 160px;
  text-align: center;
}
</style>
